<template>
	<view class="detail">
		<view class="title">{{detail.title}}</view>
		<view class="info">
			<view class="author">编辑:{{detail.author}}</view>
			<view class="time">发布时间:{{detail.posttime}}</view>
		</view>
		<view class="content">
			<rich-text :nodes="detail.content"></rich-text>
		</view>
		<view class="description">
			声明：本站内容均采集于腾讯新闻，如有侵权请联系管理员（631599289@qq.com）进行删除，本站内容进行内容采集不代表本站及作者观点，
若有侵权请联系管理员，谢谢你的支持。
		</view>
	</view>
</template>

<script>
	//倒入公共文件中的公共方法，用于格式化时间
	import {parseTime} from "@/utils/tool.js"
	export default {
		data() {
			return {
				//初始化数据
				options:{},	//请求参数
				detail:{}	//新闻详情数据
			};
		},
		//生命周期函数，页面第一次加载时触发
		onLoad(e){
			this.options = e
			//获取新闻详情
			this.getDetailData()
		},
		//事件方法
		methods:{
			//网络请求，获取新闻详情接口数据
			getDetailData(){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/detail.php",
					data:this.options,
					success:res=>{
						//格式化时间
						res.data.posttime = parseTime(res.data.posttime)
						//正则替换详情内容的图片样式，使得其能在页面中完整显示
						res.data.content = res.data.content.replace(/<img/gi,'<img style="max-width:100%"')
						//赋值详情数据
						this.detail = res.data
						//新闻详情设置缓存
						this.saveHistory()
						//设置到导航栏标题
						uni.setNavigationBarTitle({
							title:res.data.title
						})
					}
				})
			
			},
			//设置详情数据缓存
			saveHistory(){
				//获取老缓存数据，没有，默认返回一个空数组
				let histroyArr = uni.getStorageSync('historyArr') || []
				//缓存数据内容
				let item = {
					id:this.detail.id,
					title:this.detail.title,
					cid:this.detail.classid,
					picurl:this.detail.picurl,
					looktime:parseTime(Date.now())
				}
				//查找数组中重复的数据，用于驱虫
				let index = histroyArr.findIndex(i=>{
					return i.id==this.detail.id
				})
				//将数组中重复的数据删除
				if(index>=0){
					histroyArr.splice(index,1)
				}
				//在数组的最前位置，插入新数据
				histroyArr.unshift(item)
				//截取数组最新十条
				histroyArr = histroyArr.slice(0,10)
				//缓存内容数据
				uni.setStorageSync('historyArr',histroyArr)
			}
		}
	}
</script>

<style lang="scss">
.detail{
	padding: 30rpx;
	//标题样式
	.title{
		font-size: 46rpx;
		color:#333;
	}
	//信息样式
	.info{
		background: #f6f6f6;
		padding: 20rpx 10rpx;
		font-size: 22rpx;
		color: #666;
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0;	
	}
	//内容容器样式
	.content{
		padding-bottom: 50rpx;
	}
	//底部描述样式
	.description{
		background:#fef0f0;
		font-size:26rpx;
		padding: 20rpx;
		color: #f89898;
		line-height: 1.8em;
		
	}
}
</style>
